<!doctype html>
<html>
<head>
<meta charshet="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<title>svgsample</title>
<script>
    </script>
	<!--script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script-->
	
<style>
  .bottom, .rh-line, .ibm-line {
  fill: none;
 
}

.bottom {
  stroke-width: inherit;
  stroke:#567;
  stroke-opacity: .3;
}

.rh-line, .ibm-line {
  stroke: #e00;
  animation: loop 3s linear infinite;
  stroke-dasharray: 0 28;
  stroke-linecap: round;
}

.finny {
  stroke-width: 1.43;
  animation: rot 36s linear infinite;
  max-height: 50vh;
  margin-top: 25vh;
}

.ibm-line {
  stroke: #ffa500;
  animation-delay: -1.5s;
}

.rh-line, .ibm-line {
  mix-blend-mode: screen;
}

body{perspective: 400px}

@keyframes rot {
  49%{transform: rotate(179deg) rotatey(60deg)}
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loop {
  0% {
    stroke-dashoffset: .5;
    stroke-dasharray: 1 26.5;
    stroke-width: 1.5;
  }
  20% { stroke-width: .35; }
  50% {
    stroke-dasharray: 7 20.5;
  }
  90% { stroke-width: .35; }
  100% {
    stroke-width: 1.5;
    stroke-dasharray: 1 26.5;
    stroke-dashoffset: 28;
  }
}
.clip-shadow {
  stroke-linecap: butt;
  fill: none; opacity:.9;
  stroke-width: inherit;
  stroke: url(#sgrad);
}

body {
  background-color: #ffffff;
background-image: radial-gradient( #ffffff, #ff7fa8 );
  background-size: 100vw 100vw; 
  background-position: 50% 50%;
}


.rh-dot, .ibm-dot{fill:none; stroke-linecap: round; stroke:#aaa; stroke-width: .3; stroke-dasharray: 0.01 1 .01 1 .01 26;  mix-blend-mode: screen; 
  animation: chase 3s linear infinite;
}    
 
.rh-dot{  stroke: #ffe211;
}
.ibm-dot{animation-delay: -1.5s;  stroke: #39c5bb;
}

@keyframes chase {
  0% {
    stroke-dashoffset: 31.5;
   
  }
  20% {   }
  50% {

   }
  90% {  }
  100% {
    
     stroke-dashoffset: 60;
  }
}
</style>
</head>
<body>
	<svg class="finny" viewBox="-1 -1 12 8">
<defs>
<path id="infinite"
d="M5 3C4 2 3.1 1 2 1a2 2 
   0 000 4c1.1 0 2-1 3-2s1.9-2 
   3-2a2 2 0 010 4C6.9 
   5 6 4 5 3" />
  
 <radialGradient  id="sgrad"
  gradientUnits="userSpaceOnUse" 
  cx="5" cy="3" r="3.4">
    <stop offset=".25" stop-color="#ffffff" />
    <stop offset=".9"   stop-color="#ffffff" stop-opacity="0"  />
  </radialGradient>
  </defs>
  
  <use xlink:href="#infinite" class="bottom" />
  <path class="clip-shadow" 
    d="M4.5 2.5C3.7 1.7 2.9 1 2 1m6 4c-1 0-1.7-.7-2.5-1.5" />
  <use xlink:href="#infinite" class="rh-line" />
  <use xlink:href="#infinite" class="rh-dot" />
  <use xlink:href="#infinite" class="ibm-line" />
  <use xlink:href="#infinite" class="ibm-dot" />

</svg>
</body>
</html>
